<!--
 * @Author: 闫一丹 1437921153@qq.com
 * @Date: 2022-12-23 22:38:04
 * @LastEditors: 闫一丹 1437921153@qq.com
 * @LastEditTime: 2023-01-14 20:13:45
 * @FilePath: \vue-xuexitong\src\views\WriteNote.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>
import { onMounted, ref, watch } from "vue";
// 引入路由
import { useRouter } from "vue-router";
import { storeToRefs } from 'pinia'
import { myNoteStore } from '@/stores/note.js'

// 实例化路由
const router = useRouter();
// 实例化仓库
const noteStore = myNoteStore()
const { writeNoteText,uploadFile } = noteStore
const { fileUrl } = storeToRefs(noteStore)
function goback() {
  // 返回上一页
  router.go(-1);
}
const item = ref(null);
const value = ref(0);
const noteTitle = ref('')
const noteText = ref('')
const writeText = async () => {
    try {
        await writeNoteText(
            { note_title: noteTitle.value, note_text: noteText.value,note_img: fileUrl.value}
        )
    } catch (error) {
        return Promise.reject(error)

    }
}

// const file = ref({ content:  fileUrl.value})
// 文件上传
const afterRead = async(file) => {
    let data = new FormData();
    data.append('file', file.file)
    try {
      await uploadFile(data)  
    } catch (error) {
      return Promise.reject(error)
    }
};



function upload() {}
</script>

<template>
  <div class="writeNote">
    <div class="nav">
      <i class="iconfont icon-zuosanjiao" @click="goback"></i>
      <van-dropdown-menu>
        <van-dropdown-item title="根目录" ref="item">
          <van-cell center title="公开笔记">
            <template #icon>
              <i class="iconfont icon-24gf-folderShare"></i>
            </template>
          </van-cell>
          <van-cell center title="个人笔记">
            <template #icon>
              <i class="iconfont icon-a-wenjianjiawenjian"></i>
            </template>
          </van-cell>
        </van-dropdown-item>
      </van-dropdown-menu>
      <button @click="writeText">完成&nbsp;</button>
    </div>
    <div class="note_text">
      <input type="text" placeholder="标题" v-model="noteTitle"/>
      <textarea name="" id="" rows="10" v-model="noteText"></textarea>
      <van-image width="10rem" height="10rem" fit="cover" position="center" :src="fileUrl">
          <template v-slot:loading>
              <van-loading type="spinner" size="20" />
          </template>
      </van-image>
    </div>
    <!-- 底部固定上传文件的盒子 -->
    <div class="g-foot">
      <van-uploader :after-read="afterRead" multiple :max-count="2">
        <i class="iconfont icon-zhaoxiangji" ></i>
        <i class="iconfont icon-wenjian" ></i>
      </van-uploader>
    </div>
  </div>
</template>

<style lang="less" scoped>
.nav {
  margin: 5px;
  display: flex;
  justify-content: space-between;
  button {
    background-color: transparent;
    border: 0;
  }
  .icon-zuosanjiao:before {
    font-size: 20px;
  }
  i {
    display: flex;
    align-items: center;
  }
}
.note_text {
  input::-webkit-input-placeholder {
    font-size: 14px;
    color: rgb(205, 204, 204);
  }
  input {
    padding-left: 5px;
    padding-bottom: 5px;
    color: black;
    width: 100%;
    border: 0;
    border-bottom: 1px solid #6ebcec;
  }
  textarea {
    padding: 4px;
    width: 100%;
    height: 100%;
    border: 0;
    resize: none;
  }
}
.icon-24gf-folderShare,
.icon-a-wenjianjiawenjian {
  font-size: 20px;
  vertical-align: middle;
  color: rgba(30, 144, 255, 0.4);
  padding: 2px 8px 2px 2px;
}
.van-dropdown-menu__title:after {
  right: -12px;
}
.g-foot {
  z-index: 1000;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  display: flex;
  justify-content: space-around;
  background-color: #f7f7f7;
  .iconfont {
    font-size: 35px;
    margin-bottom: 5px;
  }
}
</style>
<style>
:root {
  --van-dropdown-menu-shadow: 0;
}
</style>